 <!-- 我的主页 -->
 <template>  
 	<view class="mine">
 		<!-- 用户信息 -->
 			<!-- 这里是内容头像内容 -->
 			<view class="my-top padding">
				<nav-bar type="fixed" fontColor='#FFFFFF' :backState="2000" :bgColor="'rgba(43,164,247,' + opcity + ')'" title="我的" :transparentValue='opcity'>
				</nav-bar>
				<view class="u-f-jsb">
					<!-- 已登录 -->
					<view class="u-f-ac avater-box" v-if="userInfo">
						<view class="avater round">
							<!-- 有头像，则显示头像，没头像，则用默认头像 -->
							<image :src="userInfo.memberAvatar?userInfo.memberAvatar:'../../static/logo.jpg'" mode="aspectFill"></image>
						</view>
						<view class="avatar-text">
							<view class="u-f-ac">
								<!-- 有昵称显示昵称，无昵称，显示手机号码 -->
								<text class="name text-cut">{{userInfo.nickName || userInfo.memberAccount}}</text>
							</view>
							<navigator url="settings/setting" hover-class="none" class="group">账户设置</navigator>
						</view>
					</view>
					<!-- 未登录 -->
					<navigator hover-class="none" url="../auth/login/login" class="u-f-ac avater-box" v-else>
						<view class="avater round">
							<image src="../../static/logo.jpg"  mode="aspectFill"></image>
						</view>
						<view class="avatar-text">
							<view class="u-f-ac">
								<text style="text-decoration: underline;">点击登录</text>
							</view>
						</view>
					</navigator>
					<view class=" top-icon-box">
						<button class="contact-btn icon iconfont icon-shouye1" open-type="contact"></button>
						<text class="icon iconfont icon-erweima"></text>
						<text class="icon iconfont icon-shezhi"></text>
					</view>
				</view>
 			</view>
			<!-- 开通会员 -->
			<view class="vip-box">
				<view class="u-f-jsb">
					<view class="text-df">开通商城尊享会员</view>
					<view class="vip_btn round text-sm">普通用户</view>
				</view>
				<view>版权归om所有</view>
			</view>
			<view class="cover-container"
			:style="[
				{
					transform: coverTransform,
					transition: coverTransition
				}
			]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend"
			>
				<!-- 我的账户 -->
				<image src="../../static/mine/radian_bg.png" class="radian_bg" mode="aspectFill"></image>
				<view class="order-box margin">
					<view class="order-title u-f-jsb" @tap="navTo('../mine/wallet/wallet')">
						<view class="text-bold u-f-ac">
							<image src="../../static/mine/zh.png" mode="aspectFill"></image>
							我的账户
						</view>
						<text class="icon iconfont icon-right text-sm"></text>
					</view>
					<view class="u-f-jsb u-f-ac">
						<view class="order-item u-f-ajc u-fc h137">
							<view class="padding-bottom-xs">28.8</view>
							<view>佣金</view>
						</view>
						<view class="order-item u-f-ajc u-fc h137">
							<view class="padding-bottom-xs">34</view>
							<view>金币</view>
						</view>
						<view class="order-item u-f-ajc u-fc h137">
							<view class="padding-bottom-xs">3</view>
							<view>积分</view>
						</view>
					</view>
				</view>
				<view class="order-box margin">
					<view class="order-title u-f-jsb">
						<view class="text-bold u-f-ac ">
							<image src="../../static/mine/dd.png" mode="aspectFill"></image>
							我的订单
						</view>
						<view class="text-sm" @tap="navTo('../mine/order/order?tab=0')">查看全部订单<text class="icon iconfont icon-right"></text></view>
					</view>
					<view class="u-f-jsb u-f-ac text-sm">
						<view class="order-item u-f-ajc u-fc" v-for="(item,index) in orderList" @tap="navTo(item.url)">
							<image class="item-img" :src="item.img" mode="aspectFit"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view>
				<view class="order-box margin" v-for="(items, indexs) in chiefAndserList" :key='indexs'>
					<view class="order-title text-bold u-f-ac" @tap="navTo('../mine/settings/setting')">
						<image :src="items.img" mode="aspectFill"></image>
						{{items.name}}
					</view>
					<view class="u-f u-f-ac fw_item text-sm">
						<view class="u-f-ajc u-fc col-3" v-for="(item,index) in items.list" :key='index' @tap="navTo(item.url)">
							<text class="iconfont" :class="item.icon"></text>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<!-- <button @click="test">测试</button> -->
			</view>
			</view>
 	</view>
 </template>
 
 <script>
	 import mine from '@/database/mine.js'
	let startY = 0, moveY = 0, pageAtTop = true;
 	export default {
 		data() {
 			return {
 				userInfo: '',
 				// 各订单数量
 				orderNum: {
 					waitPay: 3,
 					waitDeliver: 2,
 					waitReceive: 0
 				},
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				opcity: 0 , 	//头部透明度
				chiefAndserList: [],		//我是团长、我的服务
				orderList: mine.mineData.orderList,	
 			}
 		},
 		onShow() {
			this.chiefAndserList = this.$store.state.userInfo.stationId ? mine.mineData.chiefAndserList : mine.mineData.chiefAndserList.slice(1,2)
 			this.userInfo = this.$store.state.userInfo
 		},
 		methods: {
 			navTo(url){
 				// 路由跳转 intercept：true 路由拦截
 				this.Route({url,intercept:true})  
 			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				 moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			test(){
				let that = this
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
						that.$http.post('/api/order/confirm',{outTradeNo:res.result,memberId:that.$store.state.userInfo.memberId}).then(res => {
							that.$tip.success(res)
						})
				    }
				});
			}
 		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / 200;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
		}
 	}
 </script>
 
 <style>
	 page {
	 	background-color: #2ba4f7;
	 }
 </style>
 <style scoped lang="scss">
.vip-box{
	position: relative;
	width: calc(100vw - 40upx);
	height: 280upx;
	line-height: 88upx;
	margin: 0 20upx;
	padding:0 44upx;
	background: url(../../static/mine/hy_bg.png);
	background-repeat: no-repeat;
	background-size: cover ;
	color: rgb(255,231,137);
	border-radius: 20upx;
	margin-top: -90upx;
	.vip_btn{
		position: absolute;
		right: 24upx;
		top: 24upx;
		width: 132upx;
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		color: #36343c;
		border-radius: 20px;
		background: linear-gradient(to left, #f9e6af, #ffd465);
		z-index: 1;
	}
}
.cover-container{
	margin-top: -180upx;
	background-color: #F9F9F9;
	position: relative;
}
.radian_bg{
	width: 100%;
	height: 38upx;
	margin-top: -80upx;
}
 // 头像部分
 .my-top {
	 height: 420upx;
	 background: url(../../static/mine/mine_bg.png);
	 background-repeat: no-repeat;
	 background-size: cover ;
 	color: #fff;
 }
 .my-tab{
	 width: 100%;
	 position: fixed;
	 left: 0;
	 top: 0;
	 z-index: 99;
 }
 .top-icon-box{
	 margin-top: -20rpx;
	 .icon {
		font-size: 42rpx;
	 	margin-right: 18rpx;
	 }
 }
 .top-right-btns view {
 	margin-left: 30rpx;
 	.icon {
 		margin-right: 4rpx;
 	}
 }
 .avater-box {
 	margin-bottom: 28rpx;
 	.avater {
 		width: 140rpx;
 		height: 140rpx;
 		padding: 10rpx;
 		background-color: rgba(242,242,242,0.1);
 		image {
 			width: 120rpx;
 			height: 120rpx;
			border-radius: 100%;
 		}
 	}
 	.avatar-text {
 		margin-left: 20rpx;
 		flex: 1;
 		text {
 			margin-right: 10rpx;
 		}
 		image {
 			width: 30rpx;
 			height: 20rpx;
 		}
 		.group {
 			font-size: 24rpx;
 			padding: 0 20rpx;
 			background-color: rgba(163,52,24,0.3);
 			display: inline-block;
 			line-height: 38rpx;
 			border-radius: 38rpx;
			margin-top: 10rpx;
 		}
 		.memberAcc{
 			margin-top: 10rpx;
 			line-height: 1;
 		}
 	}
 }
 // 我的订单部分
 .order-box {
 	background-color: #fff;
 	border-radius: 20rpx;
 	margin-top: 0;
 	margin-bottom: 20rpx;
 	.order-title {
 		padding: 0 20rpx;
 		line-height: 78rpx;
 		color: #080808;
 		border-bottom: 2rpx solid #eee;
		image{
			width: 46upx;
			height: 46upx;
			margin-right: 10upx;
		}
		.iconfont{
			font-size: 72upx;
			color: #6abffa;
			margin-bottom: 6upx;
		}
 		:last-child {
 			color: rgb(153,153,153);
			font-size: 24rpx!important;
 			
 		}
 	}
	.order-item{
		flex: 1;
		height: 175upx;
	}
	.h137{
		height: 137upx!important;
	}
	.item-img{
		width: 60upx;
		height: 64upx;
		display: block;
		flex-shrink: 0;
		margin-bottom: 20upx;
	}
	.col-3{
		width: 33.33%;
		height: 175upx;
		.iconfont{
			font-size: 72upx;
			color: #6abffa;
			margin-bottom: 6upx;
		}
	}
	.fw_item{
		flex-wrap: wrap;
	}
 }
 .contact-btn{
	 display: inline;
	 background: rgba($color: #000000, $alpha: 0);
 }
 </style>
 